<template>
  <view class="container">
    <view class="area">
      <u-image :src="bg1" :lazy-load="true" width="100%" :height="bg1Height"></u-image>
      <text class="bgtext">活动期间，邀请多个好友助力即可领取奖励，每个账号只有1次助力机会。请注意，本活动仅能领取一次奖励，领取成功后，无法再领取本活动的其他奖励。</text>
    </view>
    <view class="area">
      <u-image :src="bg3" :lazy-load="true" width="100%" :height="bg3Height"></u-image>
      <text class="bgtext date">2024年3月31日</text>
    </view>
    <view class="area">
      <u-image :src="bg5" :lazy-load="true" width="100%" :height="bg5Height"></u-image>
      <view class="view-1">
        <view>
          <view style="width: 97%; margin-left: 12rpx">
            <u-table :class="['table-list', getDescWidth()]">
              <u-tr>
                <u-th>奖品</u-th>
                <u-th>达成条件</u-th>
                <u-th>剩余奖品数</u-th>
                <u-th v-if="sharePersonId.length == 0">状态</u-th>
              </u-tr>
              <u-tr v-for="(item, index) in datalist.prizeList" :key="index">
                <u-td>{{ item.prizeName }}</u-td>
                <u-td>{{ item.assistenceNum }}人助力</u-td>
                <u-td>{{ item.remainingNum }} / {{ item.totalNum }}</u-td>

                <u-td v-if="sharePersonId.length == 0">
                  <view v-if="item.status == 1" @click.stop="getGift(item)" style="color: blue">领取</view>
                  <view v-else-if="item.status == 2" style="color: #999;">已领取</view>
                  <view v-else-if="item.status == 0" style="color: #999;">已领完</view>
                  <view v-else></view>
                </u-td>
              </u-tr>
            </u-table>
          </view>
          <!-- <view class="table-Action" v-if="sharePersonId.length == 0">
            <view class="table-Action-btn" v-for="(item, index) in datalist.prizeList" :key="index">
              <view class="btnArea" v-if="item.status == 0 || item.status == 2">
                <view class="unusable">{{ item.status == 0 ? '领取' : '已领取' }}</view>
              </view>
              <u-image
                v-else-if="item.status == 1"
                :src="btn2"
                :lazy-load="true"
                width="146rpx"
                height="76rpx"
                @click="getGift(item)"
              ></u-image>
              <view v-if="item.status == 3" class="holder"></view>
            </view>
          </view> -->
        </view>
        <text class="table-text">注：领取奖励后，将会有工作人员与您取得联系并发放奖品</text>
      </view>
      <view v-if="sharePersonId.length == 0" class="recodeBtn" @click="checkRecode">领奖记录 ></view>
    </view>
    <view class="area">
      <u-image :src="bg4" :lazy-load="true" width="100%" :height="bg4Height"></u-image>
      <text class="bgtext textCenter">已有 {{ datalist.assistedList ? datalist.assistedList.length : 0 }} 人助力
        <text v-if="addCount > 0 && sharePersonId.length == 0">，还差 {{ addCount }} 人领取下阶段奖励</text></text>
      <view class="avatar">
        <u-image class="avItem" v-for="(item, index) in datalist.assistedList" :key="index" :src="item.pic"
          :lazy-load="true" shape="circle" width="97rpx" height="97rpx"></u-image>
      </view>

      <view class="accView" v-if="sharePersonId.length > 0">
        <u-image :src="btn3" :lazy-load="true" width="329rpx" height="80rpx" @click="gotoActPage"></u-image>
        <u-image v-if="!isAssisted" :src="btn4" :lazy-load="true" width="329rpx" height="80rpx"
          @click="gotoAssiste"></u-image>
        <view v-else class="assistedBtn">
          <text class="assistedText">已助力</text>
        </view>
      </view>
      <view v-else>
        <u-image class="shareBtn" :src="btn1" :lazy-load="true" width="500rpx" height="100rpx"></u-image>
        <button class="shareBtn btn-share" type="primary" open-type="share" @share="goShare"
          data-share-type="assisted"></button>
      </view>
    </view>
    <view class="bottomText" v-if="sharePersonId.length == 0">
      <text class="whiteText">本次所有活动的解释权归深圳市一览网络股份有限公司所有</text>
    </view>
    <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack"></LoginDialog>
  </view>
</template>

<script>
import {
  getZphActInfo,
  getZphPrize,
  getZphPrizeRecord,
  getZphActAssistance,
  getZphActAssistanceInfo,
} from "@/api/modules/zph.js";
import ShareMixin from "@/mixins/share";

import LoginDialog from "@/components/LoginDialog";

export default {
  mixins: [ShareMixin],
  components: {
    LoginDialog,
  },

  props: {
    activityId: {
      type: String,
      default: "",
    },
    sharePersonId: {
      type: String,
      default: "",
    },
    inputValue: {
      type: String,
      default: "",
    },
  },
  watch: {
    sharePersonId(newValue, oldValue) {
      if (newValue) {
        this.getAssisteInfo();
      }
    },
    inputValue(newValue, oldValue) {
      if (newValue) {
        this.getPrize(this.selectedPrizeItem.prizeCode, newValue);
      }
    },
  },

  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || "",
      bg1: this.$imgBaseSelf + "zph/activityBg1.png",
      bg2: this.$imgBaseSelf + "zph/activityBg2.png",
      bg3: this.$imgBaseSelf + "zph/activityBg3.png",
      bg4: this.$imgBaseSelf + "zph/activityBg4.png",
      bg5: this.$imgBaseSelf + "zph/activityBg5.png",
      btn1: this.$imgBaseSelf + "zph/activityBtn1.png",
      btn2: this.$imgBaseSelf + "zph/activityBtn2.png",

      btn3: this.$imgBaseSelf + "zph/activityBtn3.png",
      btn4: this.$imgBaseSelf + "zph/activityBtn4.png",

      bg1Height: 0,
      bg2Height: 0,
      bg3Height: 0,
      bg4Height: 0,
      bg5Height: 0,

      datalist: [],
      addCount: 0,

      isLoading: false,

      selectedPrizeItem: undefined,
      showInput: false,
      inputText: "",
      isAssisted: false,
    };
  },

  mounted() {
    console.log("活动页面 - mounted");
    this.sharePath = "/pagesSub/careerGrow/zph/zphActivity";
    this.getData();
    this.getHeaderHeight();
  },

  methods: {
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    loginSuccessBack() {
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      this.getAssisteInfo();
    },

    // =======助力页面数据===================

    // 我要参与
    gotoActPage() {
      console.log("我要参与----");
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      uni.navigateTo({
        url: "./zphActivity?activityId=" + this.activityId,
      });
    },

    // 好友点击助力按钮
    gotoAssiste() {
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      const params = {
        personId: this.personId,
        assistedPersonId: this.sharePersonId,
      };
      getZphActAssistance(params)
        .then((res) => {
          console.log("🚀 ~ 好友点击助力按钮 ~ res:", res);
          uni.showToast({
            title: res.status_desc,
            icon: "none",
          });
          if (res.code == 200) {
            this.isAssisted = true;
            this.getAssisteInfo();
          }
        })
        .finally(() => {
          this.isLoading = false;
        });

      this.didAssisted = true;
    },

    // 查看好友助力信息
    getAssisteInfo() {
      const params = {
        personId: this.personId,
        assistedPersonId: this.sharePersonId,
      };
      getZphActAssistanceInfo(params).then((res) => {
        console.log("🚀 ~ 查看好友助力信息 ~ res:", res);
        if (res.code == 200) {
          this.datalist.assistedList = res.data.assistedList;
          this.isAssisted = res.data.hasAssistance;
        }
      });
    },

    getDescWidth() {
      if (this.sharePersonId.length == 0) {
        return "";
      } else {
        return "table-assistance";
      }
    },

    // ==========================

    getGift(item) {
      console.log("领取奖励----", item);
      this.selectedPrizeItem = item;
      this.onTipBeforeGift(item);
    },
    goShare(param) {
      console.log("分享助力----", param);
    },
    checkRecode() {
      console.log("领奖记录----");
      this.getPrizeRecord();
    },

    onTipBeforeGift(item) {
      uni.showModal({
        title: "提示",
        content: "奖品只能领取1次，请确定是否继续领取？",
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            if (
              item.prizeCode == "assistence_recharge_card" ||
              item.prizeCode == "assistence_member_card"
            ) {
              // this.showInput = true;
              this.$emit("clickInputPopup", item.prizeCode);
            } else {
              this.getPrize(item.prizeCode);
            }
          }
        },
      });
    },

    // 获取活动信息
    getData() {
      this.isLoading = true;

      const params = {
        personId: this.personId,
      };
      getZphActInfo(params)
        .then((res) => {
          if (res && res.code == 200) {
            this.datalist = res.data;
            let length = res.data.assistedList.length;
            var item = 0;
            if (length < 5) {
              item = this.datalist.prizeList[0];
            } else if (length < 10) {
              item = this.datalist.prizeList[1];
            } else {
              item = this.datalist.prizeList[2];
            }
            let num = item.assistenceNum + 0;
            this.addCount = num - length;
            if (this.addCount < 0) {
              this.addCount = 0;
            }
            if (this.sharePersonId) {
              this.getAssisteInfo();
            }
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .finally(() => {
          this.isLoading = false;
        });
    },

    // 领取奖励
    getPrize(code, claimAccount = "") {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      const params = {
        personId: this.personId,
        prizeCode: code,
        claimAccount: claimAccount,
      };
      getZphPrize(params)
        .then((res) => {
          console.log("🚀 ~ getZphPrize ~ res:", res);
          uni.showToast({
            title: res.status_desc,
            icon: "none",
          });
          if (res.code == 200) {
            this.getData();
          }
        })
        .finally(() => {
          this.isLoading = false;
        });
    },

    // 领取奖励记录
    getPrizeRecord() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      const params = {
        personId: this.personId,
        prizeType: "assistence", // 奖品类型(assistence:助力奖品，lottery_draw：抽奖奖品)
      };
      getZphPrizeRecord(params)
        .then((res) => {
          console.log("🚀 ~ getZphPrizeRecord ~ res:", res);
          if (res.code == 200) {
            this.$emit("didClicPopupRecode", res.data.prizeRecordList);
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .finally(() => {
          this.isLoading = false;
        });
    },

    getHeaderHeight() {
      let width = uni.getSystemInfoSync().windowWidth;
      this.bg1Height = width * (398 / 1013) + "px";
      this.bg2Height = width * (398 / 1013) + "px";
      this.bg3Height = width * (293 / 1013) + "px";
      this.bg4Height = width * (546 / 1013) + "px";
      this.bg5Height = width * (841 / 1013) + "px";
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  background-color: #8484ff;

  .area {
    position: relative;
    margin-bottom: 20rpx;

    .view-1 {
      position: absolute;
      top: 50px;
      width: 100%;

      .table-list {
        // position: absolute;
        // left: 10rpx;
        // right: 165rpx;
      }

      .table-assistance {
        margin-top: 43rpx;
        width: 95%;
      }

      .table-Action {
        position: absolute;
        top: 84rpx;
        right: 10rpx;
        .table-Action-btn {
          margin-bottom: 20rpx;

          .btnArea {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 146rpx;
            height: 76rpx;
            border-radius: 38rpx;
            background-color: #ebebeb;
          }

          .unusable {
            color: #999999;
          }
          .holder {
            width: 146rpx;
            height: 76rpx;
          }
        }
      }
      .table-text {
        margin: 10rpx 35rpx;
        color: #b3b2b2;
        font-size: 24rpx;
      }
    }

    .posit {
      position: absolute;
      top: 10rpx;
      padding: 80rpx 20rpx 0;
    }
    .bgtext {
      position: absolute;
      top: 10rpx;
      padding: 80rpx 20rpx 0;
      font-size: 25rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #454b5b;
      line-height: 42rpx;
    }
    .textCenter {
      width: 100%;
      text-align: center;
    }

    .date {
      font-size: 33rpx;
      font-weight: 500;
      width: 100%;
      text-align: center;
      padding: 0;
      margin-top: 100rpx;
    }
    .shareBtn {
      position: absolute;
      bottom: 26rpx;
      margin-left: 17%;
    }

    .accView {
      width: 100%;
      height: 50px;
      position: absolute;
      bottom: 63px;
      display: flex;
      justify-content: space-around;
      bottom: 0rpx;

      .assistedBtn {
        width: 164px;
        height: 40px;
        background-color: #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 34rpx;
        border-radius: 40rpx;
      }
      .assistedText {
        color: #999999;
      }
    }

    .btn-share {
      padding: 0;
      border: none;
      background-color: transparent;
      width: 500rpx;
      height: 100rpx;
      border-radius: 30rpx;
    }

    .table-1 {
      margin-top: 43rpx;
      width: 75%;
    }

    .tableBtn {
      position: absolute;
      top: 214rpx;
      right: 10rpx;
      .button {
        margin-bottom: 20rpx;

        .btnArea {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 146rpx;
          height: 76rpx;
          border-radius: 38rpx;
          background-color: #ebebeb;
        }

        .unusable {
          color: #999999;
        }
        .holder {
          width: 146rpx;
          height: 76rpx;
        }
      }
    }

    .recodeBtn {
      font-size: 31rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #454b5b;
      position: absolute;
      left: 43%;
      bottom: 38rpx;
    }

    .avatar {
      display: flex;
      overflow-x: auto; /* 设置水平方向滚动 */
      white-space: nowrap; /* 防止元素折行 */
      position: absolute;
      top: 152rpx;
      width: 100%;

      .avItem {
        margin-left: 35rpx;
      }
    }
  }
  .bottomText {
    display: flex;
    justify-content: center;
    .whiteText {
      color: white;
      margin: 62rpx 0;
    }
  }

  .popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 100%;
    .title {
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #454b5b;
      margin-top: 70rpx;
      margin-bottom: 50rpx;
    }

    .table {
      margin-top: 43rpx;
      width: 90%;
    }
    .tipText {
      margin: 10rpx 35rpx;
      color: #b3b2b2;
      font-size: 24rpx;
    }

    .inputVuew {
      width: 90%;
      .inputTip {
        color: #b3b2b2;
        font-size: 24rpx;
        margin-bottom: 20rpx;
      }
    }

    .popupBtn {
      position: absolute;
      bottom: 40rpx;
      left: 52rpx;
      right: 52rpx;
    }

    .popupEmptyText {
      margin: 77rpx;
    }
  }
  .tipText {
    margin: 10rpx 35rpx;
    color: #b3b2b2;
    font-size: 24rpx;
  }
}
</style>
